import Vue from 'vue'
import Lottie from 'vue-lottie'
import animationData from '@/assets/json/loading.json'
import router from '../../router'
import store from '../../store'

export const loadingTemplate = new Vue({
  router,
  store,
  components: {
    Lottie
  },
  data() {
    return {
      text: '正在加载中...'
    }
  },
  render(h, params) {
    return h('div', {
      class: 'lxh-loading',
      props: {
        backgroundColor: '#ffffff',
        color: '#333333'
      }
    }, [
      h('div', {
        class: 'loading-image'
      }, [
        h('lottie', {
          ref: 'animation',
          props: {
            options: {
              animationData: animationData
            }
          }
        })
      ]),
      h('p', {
        class: 'loading-text'
      }, this.text)
    ])
  }
}).$mount()

export const errorTemplate = new Vue({
  router,
  store,
  data() {
    return {
      text: '加载失败...'
    }
  },
  render(h, params) {
    return h('div', {
      class: 'lxh-error',
      props: {
        backgroundColor: '#ffffff',
        color: '#333333'
      }
    }, [
      h('l-title', {
        props: {
          title: '网络异常'
        }
      }),
      h('div', {
        class: 'error-image'
      }),
      h('p', {
        class: 'error-tips'
      }, '网络走失了'),
      h('p', {
        class: 'error-tips'
      }, '请确认网络是否正常连接'),
      h('van-button', {
        class: 'error-btn',
        props: {
          type: 'info'
        },
        on: {
          click() {
            window.location.reload()
          }
        }
      }, '刷新页面')
    ])
  }
}).$mount()
